<template>
    <div style="width: 100%;height: 100%;padding: 1px;position:relative;">
        <v-chart
                :option="topologyOption"
                :style="{ width: '100%', height: '100%' }"
                autoresize
        ></v-chart>
        <div style="position: absolute;left: 1px;top: 1px;z-index: 999;display: flex;flex-direction: column;padding: 2px;gap: 5px;">
            <el-button size="mini" round @click="lineType='横向折线'" type="primary" style="width: 100px;margin-left: 0 !important;">
                横向折线
            </el-button>
            <el-button size="mini" round @click="lineType='纵向折线'" type="primary" style="width: 100px;margin-left: 0 !important;">
                纵向折线
            </el-button>
            <el-button size="mini" round @click="lineType='横向二次折线'" type="primary" style="width: 100px;margin-left: 0 !important;">
                横向二次折线
            </el-button>
            <el-button size="mini" round @click="lineType='纵向二次折线'" type="primary" style="width: 100px;margin-left: 0 !important;">
                纵向二次折线
            </el-button>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                lineType: '横向折线', // 默认【横向折线】
                //节点分类的类目
                categories: [
                    {
                        name: '路由器',
                        itemStyle: {color: '#5470C6'},
                        symbol: `image://${require('./t002/icons/icon_router.png')}`
                    },
                    {
                        name: '交换机',
                        itemStyle: {color: '#91CC75'},
                        symbol: `image://${require('./t002/icons/icon_switcher.png')}`
                    },
                    {
                        name: '服务器',
                        itemStyle: {color: '#EE6666'},
                        symbol: `image://${require('./t002/icons/icon_server.png')}`
                    },
                    {
                        name: '防火墙',
                        itemStyle: {color: '#FAC858'},
                        symbol: `image://${require('./t002/icons/icon_firewall.png')}`
                    }
                ],
                // 模拟数据 - 节点
                nodes: [
                    {id: 1, name: 'Router-1', category: 0, ip: '192.168.1.1', status: '在线'},
                    {id: 2, name: 'Switch-A', category: 1, ip: '192.168.1.2', status: '在线'},
                    {id: 3, name: 'Server-X', category: 2, ip: '192.168.1.3', status: '警告'},
                    {id: 4, name: 'Firewall', category: 3, ip: '192.168.1.4', status: '在线'},
                    {id: 5, name: 'Switch-B', category: 1, ip: '192.168.1.5', status: '离线'},
                    {id: 6, name: 'Server-Y', category: 2, ip: '192.168.1.6', status: '在线'},
                    {id: 7, name: 'Router-2', category: 0, ip: '192.168.1.7', status: '在线'}
                ],
                // 模拟数据 - 连线
                links: [
                    {source: '1', target: '2', type: 'primary'},
                    {source: '2', target: '3', type: 'primary'},
                    {source: '2', target: '4', type: 'secondary'},
                    {source: '4', target: '5', type: 'secondary'},
                    {source: '5', target: '6', type: 'primary'},
                    {source: '5', target: '7', type: 'primary'},
                    {source: '3', target: '6', type: 'backup'}
                ],
            }
        },
        computed: {
            topologyOption() {
                return {
                    title: {
                        text: '拓扑图进阶:' + this.lineType,
                        left: 'center',
                        textStyle: {
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        trigger: 'item', // 节点/连线触发提示
                        formatter: params => {
                            // 自定义提示内容
                            if (params.dataType === 'node') {
                                return `
                                    <div><strong>${params.data.name}</strong></div>
                                    <div>类型: ${this.categories[params.data.category].name}</div>
                                    <div>IP: ${params.data.ip}</div>
                                    <div>状态: ${params.data.status}</div>
                                `;
                            } else if (params.dataType === 'edge') {
                                return `
                                     <div><strong>连线</strong></div>
                                    <div>从: ${params.data.source}</div>
                                    <div>到: ${params.data.target}</div>
                                    <div>类型: ${params.data.type === 'primary' ? '主链路' : '备用链路'}</div>
                                `;
                            }
                        }
                    },
                    // 关系图核心配置
                    series: [
                        {
                            type: 'graph', // 类型为关系图
                            layout: 'none', // 不使用力导向布局，手动指定坐标
                            symbolSize: 50, // 节点默认大小
                            roam: true, // 允许拖拽、缩放
                            draggable: true, //允许对节点拖拽
                            //节点标题设置
                            label: {
                                show: true, // 显示节点名称
                                position: 'bottom', // 名称显示位置
                                fontSize: 12
                            },
                            //连接线设置
                            edgeLabel: {
                                show: true, // 显示连线标签（可选）
                                formatter: params => {
                                    console.log("params",params);
                                    return params.data.source+" ▶▶▶ "+params.data.target;
                                }, // 连线标签内容
                                fontSize: 10
                            },
                            edgeSymbol: ['none', 'arrow'],//边两端的标记类型:起点不显示任何标记,终点显示箭头标记
                            edgeSymbolSize: 10,//边两端的标记大小
                            //自定义的类目设置
                            categories: this.categories,
                            // 节点数据
                            nodes: this.generateNodePositions(),
                            // 节点/item样式
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 2,
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            // 连线数据
                            links: this.links,
                            // 连线样式
                            lineStyle: {
                                width: 2,
                                ...this.getLinkStyle(),//根据选择的类型，选择直线类型
                            },
                            //当鼠标悬停（hover）或点击某个节点时，ECharts 会自动突出显示该节点及其直接相连的节点、连线，同时淡化其他无关的节点和连线
                            focusNodeAdjacency: true,
                            //鼠标高亮（hover / 选中）时的样式与交互规则
                            emphasis: {
                                scale: true, //高亮时元素自动缩放
                                lineWidth: 3,
                                focus: 'adjacency', //高亮时聚焦 “相邻元素”
                                label: {
                                    show: true //高亮时强制显示节点标签
                                }
                            },
                        }
                    ]
                }
            },
        },
        methods: {
            //给节点添加上位置信息
            generateNodePositions() {
                const nodes = [...this.nodes];
                const centerX = 400;
                const centerY = 250;
                const spacing = 120;

                switch (this.lineType) {
                    case '横向折线':
                        nodes[0].x = centerX - 200;
                        nodes[0].y = centerY;
                        nodes[1].x = centerX - 100;
                        nodes[1].y = centerY;
                        nodes[2].x = centerX;
                        nodes[2].y = centerY - 100;
                        nodes[3].x = centerX;
                        nodes[3].y = centerY;
                        nodes[4].x = centerX + 100;
                        nodes[4].y = centerY;
                        nodes[5].x = centerX + 200;
                        nodes[5].y = centerY - 100;
                        nodes[6].x = centerX + 300;
                        nodes[6].y = centerY;
                        break;

                    case '纵向折线':
                        nodes[0].x = centerX;
                        nodes[0].y = centerY - 200;
                        nodes[1].x = centerX;
                        nodes[1].y = centerY - 100;
                        nodes[2].x = centerX - 100;
                        nodes[2].y = centerY;
                        nodes[3].x = centerX;
                        nodes[3].y = centerY;
                        nodes[4].x = centerX;
                        nodes[4].y = centerY + 100;
                        nodes[5].x = centerX - 100;
                        nodes[5].y = centerY + 200;
                        nodes[6].x = centerX;
                        nodes[6].y = centerY + 300;
                        break;

                    case '横向二次折线':
                    case ' 纵向二次折线':
                    default:
                        // 默认布局（适合贝塞尔曲线）
                        nodes[0].x = centerX - 250;
                        nodes[0].y = centerY - 50;
                        nodes[1].x = centerX - 150;
                        nodes[1].y = centerY - 50;
                        nodes[2].x = centerX - 50;
                        nodes[2].y = centerY - 150;
                        nodes[3].x = centerX + 50;
                        nodes[3].y = centerY;
                        nodes[4].x = centerX + 150;
                        nodes[4].y = centerY + 50;
                        nodes[5].x = centerX + 250;
                        nodes[5].y = centerY - 100;
                        nodes[6].x = centerX + 350;
                        nodes[6].y = centerY + 50;
                        break;
                }
                return nodes;
            },
            // 获取当前连线样式
            getLinkStyle() {
                switch (this.lineType) {
                    case '横向折线':
                    case '纵向折线':
                        return {
                            curveness: 0, // 曲率=0,直线
                            type: 'solid'
                        };

                    case '横向二次折线':
                        return {
                            curveness: 0.3, // 曲率为正，向上弯曲
                            type: 'solid'
                        };

                    case '纵向二次折线':
                        return {
                            curveness: -0.3, // 曲率为负，向下弯曲
                            type: 'solid'
                        };

                    default:
                        return {
                            curveness: 0,
                            type: 'solid'
                        };
                }
            },
        },
    }
</script>